<div id="typography-inline-text-elements" class="p-24">

    <div class="mat-card mat-elevation-z2 p-24" fxLayout="column">

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <span><abbr title="Cascaded Style Sheet">CSS</abbr></span>
            </div>

            <base-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <abbr title="Cascaded Style Sheet">CSS</abbr>
                </textarea>
            </base-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <span>This is a <mark>marked</mark> text.</span>
            </div>

            <base-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    This is a <mark>marked</mark> text.
                </textarea>
            </base-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <span>
                    <del>This is a deleted text.</del>
                </span>
            </div>

            <base-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <del>This is a deleted text.</del>
                </textarea>
            </base-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <span><s>This is a strike-through text.</s></span>
            </div>

            <base-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <s>This is a strike-through text.</s>
                </textarea>
            </base-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <span><u>This is an underlined text.</u></span>
            </div>

            <base-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <u>This is an underlined text.</u>
                </textarea>
            </base-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <span>
                    <small>This is a small text.</small>
                </span>
            </div>

            <base-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <small>This is a small text.</small>
                </textarea>
            </base-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <span><strong>This is a strong text.</strong></span>
            </div>

            <base-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <strong>This is a strong text.</strong>
                </textarea>
            </base-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <span><em>This is an italic text.</em></span>
            </div>

            <base-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <em>This is an italic text.</em>
                </textarea>
            </base-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <span>This is a
                    <span class="text-super">super</span>
                    text.
                </span>
            </div>

            <base-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    This is a
                    <span class="text-super">super</span>
                    text.
                </textarea>
            </base-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <span>
                    This is a
                    <span class="text-sub">sub</span>
                    text.
                </span>
            </div>

            <base-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    This is a
                    <span class="text-sub">sub</span>
                    text.
                </textarea>
            </base-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <span>This is a
                    <span class="text-capitalize">capitalized</span>
                    text.
                </span>
            </div>

            <base-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    This is a
                    <span class="text-capitalized">capitalized</span>
                    text.
                </textarea>
            </base-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <span>This is an
                    <span class="text-uppercase">uppercase</span>
                    text.
                </span>
            </div>

            <base-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    This is an
                    <span class="text-uppercase">uppercase</span>
                    text.
                </textarea>
            </base-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <span>This is a
                    <span class="text-lowercase">LOWERCASE</span>
                    text.
                </span>
            </div>

            <base-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    This is a
                    <span class="text-lowercase">LOWERCASE</span>
                    text.
                </textarea>
            </base-highlight>

        </div>

    </div>

</div>